<template>
  <div>
    <a-layout class="layout">
      <a-layout-header>
        <Header></Header>
      </a-layout-header>

      <a-layout-content style="padding: 0 50px;height: 85vh">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>List</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb>


        <Content></Content>
      </a-layout-content>

      <a-layout-footer style="text-align: center">
        <Footer></Footer>
      </a-layout-footer>

    </a-layout>
  </div>
</template>

<script lang='ts' setup>
import { io } from "socket.io-client";
import { onMounted, ref } from 'vue'
import { UseSocketStore } from "@/stores/index";
import { v4 as uuid } from 'uuid';
// 组件
import Header from './page/Header/index.vue'
import Content from './page/Content/index.vue'
import Footer from './page/Footer/index.vue'


let store = UseSocketStore()
const currentUserId = ref(uuid())
onMounted(() => {

  store.socket = io("http://localhost:3031", {
    transports: ["websocket"],
    query: {
      userId: currentUserId.value,
      roomId: 'TestWebRtc'
    }
  });

  // store.socket.emit('testTob', {
  //   msg: '\'B能收到吗\'',
  //   userId: store.userInfo.currentUserId
  // })
  // store.socket.on('testTob', function (msg) {
  //   console.log(msg)
  // })

  store.socket.on("connect", async () => {
    console.log('客户端的连接', store.socket.id)
    store.userInfo.currentUserId = currentUserId.value


  })



  // 监听断开连接事件
  store.socket.on('disconnect', () => {
    console.log('与服务器断开连接');
    // 在此处可以添加其他断开连接时的操作
  });
})


</script>
<style scoped>
.site-layout-content {
  min-height: 280px;
  padding: 24px;
  background: #fff;
}

#components-layout-demo-top .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

[data-theme='dark'] .site-layout-content {
  background: #141414;
}
</style>